import React from "react";
import Layout from "../Layout/Layout";
import OrderItem from "./components/OrderItem";
import "./orderList.css";
import {Button, Modal, Toast} from "antd-mobile";
import {validEmail} from "../../utils/common";

class OrderList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: ""
        };
    }

    // eslint-disable-next-line react/no-deprecated
    async componentWillMount() {
        await this.initDate();
    }

    initDate = async () => {
        const email = window.localStorage.getItem("email");
        if (email) {
            this.setState({
                email
            });
            await this.props.getOrderList(email);
        }
    }

    render() {
        return (
            <Layout {...this.props}>
                <div className={"order-list"} style={{
                    alignItems: !this.state.email ? "center" : ""
                }}>
                    {this.state.email ? this.props.orderList
                        .map(order => <OrderItem order={order}
                            key={order.parkingReservedOrderId}/>)
                        : <Button size={"small"} onClick={() => {
                            Modal.prompt(
                                "提示",
                                "请输入你的邮箱地址!",
                                [
                                    {
                                        text: "取消"
                                    },
                                    {
                                        text: "确定",
                                        onPress: email => {
                                            if (validEmail(email)) {
                                                this.setState({
                                                    email
                                                }, async () => {
                                                    await this.props.getOrderList(email);
                                                    this.setState({
                                                        email: ""
                                                    });
                                                    if (this.props.orderList.length > 0) {
                                                        localStorage.setItem("email", email);
                                                    }
                                                });
                                            } else {
                                                Toast.fail("请输入正确的邮箱!");
                                            }
                                        }
                                    }
                                ],
                                "text"
                            );
                        }
                        }>输入邮箱</Button>
                    }
                </div>
            </Layout>
        );
    }
}

export default OrderList;